<template>
    <div class="order page">
        <formHeader title="我的订单" wColor tBack></formHeader>
        <cube-tab-bar
                v-model="selectedLabelDefault"
                :data="tabs"
                @change="changeHandler">
        </cube-tab-bar>
        <ul class="typeBar" v-if="!$route.query.ways&&type==0">
            <li
                    v-for="(item,index) in orderTypeList"
                    :key="index"
                    :class="{selected:selectType==index}"
                    @click="selectOrderType(item.orderType,item.busType,index)"
            >{{item.text}}</li>
        </ul>
        <div class="con" :class="{marginTop75:$route.query.ways||type!=0}">
            <cube-scroll
                    @pulling-up="pullUpLoad"
                    ref="scroll"
                    :options="options"
                    :data="orderList"
                    :refreshDelay="20"
            >
                <div class="orderItem" v-for="(order) in orderList" :key="order.mallOrder.id">
                    <div class="top">
                        <div class="title">
                            <div class="shopName" @click="inShop(order.shopEntity?order.shopEntity.userId:0)">
                                <img src="./shop.png" alt="">
                                <span>{{order.shopEntity?order.shopEntity.name:'社集优选旗舰店'}}</span>
                                <img style="width:12px;height:12px;" src="./right.png" alt=""/>
                            </div>
                            <div class="mark">
                                <span>{{orderPayStatusOptions[order.mallOrder.payStatus]}} </span>
                                <span>{{orderStatusOptions[order.mallOrder.orderStatus]}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="cen" v-for="(item,index) in order.mallOrder.items" :key="index" @click="turnDetail('/detail?id='+item.goodsId)">
                        <div ><img :src="imgH+item.img" alt=""></div>
                        <div class="word">
                            <div class="title">
                                <div class="name">{{item.name}}</div>
                                <div class="right">
                                    <div class="price">￥<span style="font-size:19px;font-weight:500;">{{item.price?parseInt(item.price):'0'}}</span>.{{item.price?item.price.toFixed(2).split('.')[1]:'00'}}</div>
                                    <div class="num">x{{item.quantity}}</div>
                                </div>
                            </div>
                            <div class="type">{{item.skuName?item.skuName:'默认'}}</div>
                        </div>
                    </div>
                    <div class="final">
                        <span>共{{order.mallOrder.quantity}}件商品</span>
                        <span class="txt"><span style="font-size:16px;">合计</span>￥<span class="price">{{order.mallOrder.price?parseInt(order.mallOrder.price):'0'}}</span>.{{order.mallOrder.price?order.mallOrder.price.toFixed(2).split('.')[1]:'00'}}</span>
                        <!--                        <span>(含运费￥{{order.mallOrder.logFee?order.mallOrder.logFee.toFixed(2):'0.00'}})</span>-->
                    </div>
                    <div class="btn" @click="turn(order.mallOrder.id)">
                        <!--                        <div class="more">更多</div>-->
                        <!--                        <div class="gray">修改地址</div>-->
                        <!--                        <div class="gray">找人代付</div>-->
                        <div class="gray">查看详情</div>
                        <div class="gray" v-if="order.mallOrder.orderStatus!=8&&order.mallOrder.payStatus!=1">取消订单</div>
                        <div class="gray" v-if="order.mallOrder.payStatus==1&&order.mallOrder.orderStatus==2" @click.stop="turnExpressInfo(order.mallOrder.logNo)">查看物流</div>
                        <div class="dark" v-if="order.mallOrder.payStatus==0&&order.mallOrder.orderStatus==0&&!ways">继续支付</div>
                        <div class="dark" v-if="order.mallOrder.payStatus==1&&order.mallOrder.orderStatus==2&&!ways"
                             @click.stop="sureReceipt(order.mallOrder.orderNo)">确认收货
                        </div>
                        <div class="dark" v-if="order.mallOrder.payStatus==1&&order.mallOrder.orderStatus==0&&ways&&order.mallOrder.mention"
                             @click.stop="isGet(order.mallOrder.id)">提走
                        </div>

                    </div>
                </div>
            </cube-scroll>
        </div>

    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import {listOrder, getMyOrderList,getGoodsOrder,sureReceipt,isGet} from "@/api/order"
    import {showLoading,hide} from '@/toast'
    import *  as Dialog from '@/dialog'
    import {showInfo,showError} from "@/toast"

    export default {
        name: "newOrder",
        components: {formHeader},
        data() {
            return {
                selectedLabelDefault: '全部',
                orderPayStatusOptions: ["未支付", "已支付"],
                orderStatusOptions: ["新订单", "配货中", "已发货", "已收货", "退款中", "已退款", "已拒绝", "已完成", "已取消"],
                orderTypeList:[
                    {text:'进货发走',orderType:0,busType:0},
                    {text:'进货入库',orderType:1,busType:0},
                    {text:'库存发货',orderType:0,busType:1},
                    {text:'库存转货',orderType:1,busType:1}],
                orderType:null,
                busType:null,
                page: 1,
                orderList: null,
                type: 0,
                imgH: process.env.VUE_APP_IMG_DOMAIN,
                tabs: [{
                    label: '全部',
                }, {
                    label: '待付款',
                }, {
                    label: '待收货',
                }],
                flag: true,
                flagList: true,
                options: {

                    pullUpLoad: true
                },
                getGoods:true,
                selectType:-1
            }
        },
        computed:{
            ways(){
                return this.$route.query.ways
            }
        },
        mounted() {
            this.$nextTick(()=>{
                this.$refs.scroll.refresh()
                this.$refs.scroll.scrollTo(0,0)
            })
        },
        created(){
            this.type = this.$route.query.type?this.$route.query.type:0
            this.page = 1
            this.selectedLabelDefault = this.tabs[this.type].label
            this.getList()
        },
        methods: {
            //确认收货
            async sureReceipt(orderNo) {
                this.$createDialog({
                    type: 'confirm',
                    icon: 'cubeic-alert',
                    title: '请确认是否收货',
                    confirmBtn: {
                        text: '确定收货',
                        active: true,
                        disabled: false,
                        href: 'javascript:;'
                    },
                    cancelBtn: {
                        text: '取消',
                        active: false,
                        disabled: false,
                        href: 'javascript:;'
                    },
                    onConfirm: () => {
                        this.$createToast({
                            type: 'loading',
                            time: 1000,
                        }).show()
                        sureReceipt(orderNo).then(res => {
                            if (res.code == 10000) {
                                const toast = this.$createToast({
                                    txt: '收货成功',
                                    type: 'correct'
                                })
                                toast.show()
                                this.page = 1;
                                if (this.type == 0) {
                                    this.getAllList();
                                } else {
                                    this.getMyOrderList()
                                }
                            } else {
                                const toast = this.$createToast({
                                    txt: '收货失败',
                                    type: 'error'
                                })
                                toast.show()
                            }

                        })

                    },
                    onCancel: () => {
                        this.$createToast({
                            type: 'warn',
                            time: 1000,
                            txt: '取消收货'
                        }).show()
                    }
                }).show()

            },
            changeHandler(label) {
                this.orderType=null
                this.busType=null
                this.selectType = -1
                if (label == '全部') {
                    this.type = 0
                }
                if (label == '待付款') {
                    this.type = 1
                }
                if (label == '待收货') {
                    this.type = 2
                }
                this.page = 1
                this.orderList = null
                this.getList()
                if (this.$route.query.ways){
                    this.$router.push({
                        path:`/neworder?type=${this.type}&ways=1`
                    })
                }else {
                    this.$router.push({
                        path:`/neworder?type=${this.type}`
                    })
                }

                this.$refs.scroll.scrollTo(0,0)
            },
            getList() {
                showLoading('正在加载')
                if (this.flagList) {
                    this.flagList = false
                    if (this.$route.query.ways){
                        this.getGoodsOrder()
                    }else {
                        if (this.type == 0) {
                            let orderObj = JSON.parse(sessionStorage.getItem('orderObj'));
                            if (orderObj){
                                this.orderType = orderObj.orderType
                                this.busType  = orderObj.busType
                                this.selectType = orderObj.selectType
                            }
                            this.getAllList()
                        } else {
                            this.getMyOrderList()
                        }
                    }
                }
            },
            getGoodsOrder(){

                let orderStatus
                let payStatus
                if (this.type == 1) {
                    orderStatus = 0
                    payStatus = 0
                } else if (this.type == 2) {
                    orderStatus = 2
                    payStatus = 1
                }else {
                    orderStatus = -1
                    payStatus = -1
                }
                getGoodsOrder(orderStatus, payStatus, this.page,5).then(res => {
                    if (this.page == 1) {//刷新
                        this.orderList = res.data
                    } else {//添加
                        this.orderList = this.orderList.concat(res.data)
                    }
                    this.page++
                    this.flagList = true
                    hide()
                })
            },
            getAllList() {
                listOrder(this.page,this.orderType,this.busType).then(res => {
                    if (this.page == 1) {//刷新
                        this.orderList = res.data
                    } else {//添加
                        this.orderList = this.orderList.concat(res.data)
                    }
                    this.page++
                    this.flagList = true
                    hide()
                })
            },
            getMyOrderList() {
                let orderStatus
                let payStatus
                if (this.type == 1) {
                    orderStatus = 0
                    payStatus = 0
                } else if (this.type == 2) {
                    orderStatus = 2
                    payStatus = 1
                }
                getMyOrderList(orderStatus, payStatus, this.page, 5).then(res => {

                    if (this.page == 1) {//刷新
                        this.orderList = res.data

                    } else {//添加
                        this.orderList = this.orderList.concat(res.data)
                    }
                    this.page++
                    this.flagList = true
                    hide()
                })
            },
            turn(id) {
                if (this.ways){
                    this.$router.push({
                        path: `/orderdetail?id=${id}&ways=1`
                    })
                }else {
                    this.$router.push({
                        path: `/orderdetail?id=${id}`
                    })
                }
            },
            pullUpLoad(){
                this.getList()
            },
            async isGet(id){
                // if (!this.getGoods){
                //     return
                // }
                // this.getGoods =false
                // isGet(id).then(res=>{
                //     showAlert('提货成功')
                //     this.orderList.forEach(item=>{
                //         if (item.mallOrder.id==id){
                //             item.mallOrder.mention=0
                //         }
                //     })
                // })
                // setTimeout(()=>{
                //     this.getGoods=true
                // },3000)
                this.$createDialog({
                    type: 'confirm',
                    icon: 'cubeic-alert',
                    title: '确认提货',
                    confirmBtn: {
                        text: '已提货',
                        active: true,
                        disabled: false,
                        href: 'javascript:;'
                    },
                    cancelBtn: {
                        text: '取消',
                        active: false,
                        disabled: false,
                        href: 'javascript:;'
                    },
                    onConfirm: () => {
                        isGet(id).then(res=>{
                            showAlert('提货成功')
                            this.orderList.forEach(item=>{
                                if (item.mallOrder.id==id){
                                    item.mallOrder.mention=0
                                }
                            })
                        })
                    },
                }).show()
            },
            selectOrderType(orderType,busType,index){
                this.page=1
                this.$refs.scroll.scrollTo(0,0)
                if (this.selectType==index){
                    this.selectType = -1
                    this.orderType=null
                    this.busType=null
                    this.getAllList()
                }else {
                    this.selectType = index
                    this.orderType=orderType
                    this.busType=busType
                    this.getAllList()
                }
                sessionStorage.setItem('orderObj', JSON.stringify({selectType:this.selectType,orderType:this.orderType,busType:this.busType}));
            },
            inShop(id){
                this.$router.push({
                    path:`shop/list?uid=${id}`
                })
            },
            turnDetail(path){
                this.$router.push(path)
            },
            turnExpressInfo(logNo){
                if (logNo == null){
                    showError('获取物流信息失败')
                    return
                }
                this.$router.push('/expressInfo?logNo='+logNo)
            }
        }

    }
</script>

<style scoped lang="stylus">
    .order
        background-color $page-bg
        /deep/.cube-scroll-content
            padding-bottom 20px

        .tabBar
            display flex
            justify-content space-around
            background-color #fff
            position fixed
            width 100%
            top 46px
            z-index 996
            height 44px

            li
                margin-top 10px
                flex 33.3%
                text-align center
                color #666666
                font-size 14px

                span
                    padding 15px

        .cube-tab-bar
            position fixed
            width 100%
            top 46px
            z-index 996
            background-color #fff
            font-size 14px

        /deep/ .cube-tab
            color #666
            font-size 14px

        /deep/ .cube-tab_active
            color #00D6C0
            font-size 16px
            border-bottom 2px solid #00D6C0
        .typeBar
            margin-top 75px
            height 47px
            background-color: #fff
            font-size 13px
            width 100%
            display flex
            justify-content space-around
            align-items center
            li
                padding 2px 5px
                color #333
                font-size 13px
                border-radius 5px
            .selected
                font-size 13px
                padding 5px 8px
                color #00D6C0
                border 1px solid #00D6C0
        .marginTop75
            margin-top 75px
        .con
            padding 11px 15px
            /*margin-top 75px*/
            height 100%


            .orderItem
                padding 15px 10px
                background-color #fff
                border-radius 5px
                margin-bottom 10px

                .top
                    img
                        width: 19px
                        height: 19px

                    .titleTxt
                        font-size 16px
                        margin 0 6px
                    .title
                        color #666
                        font-size 13px
                        display flex
                        justify-content space-between
                        align-items center

                        .shopName
                            display flex
                            justify-content center
                            align-items center
                            font-size 16px
                            font-weight 500
                            span
                                margin 0 6px
                            img
                                display inline-block
                                width 15px
                                height 15px
                        .mark
                            color #333
                            margin-left 5px
                            font-size 15px
                            span
                                font-weight 500
                .cen
                    margin-top 15px
                    padding-bottom: 15px;
                    display flex
                    justify-content space-between
                    border-bottom 1px solid #F4F3F3
                    .word
                        flex 1
                        color #999
                        font-size 12px
                        margin-left 9px
                        margin-top 3px

                        .title
                            display flex
                            justify-content space-between
                            color #333
                            font-size 13px

                            .name
                                text-overflow -o-ellipsis-lastline
                                overflow hidden
                                text-overflow ellipsis
                                display -webkit-box
                                -webkit-line-clamp: 2
                                line-clamp 2
                                line-height 1.2
                                -webkit-box-orient vertical
                                font-size 14px
                                font-weight 500
                            .right
                                margin-left 17px
                                text-align right
                                .price
                                    font-size 12px
                                    font-weight 500
                                .num
                                    margin-top: 5px;
                                    color #999
                        .type
                            color #999
                            font-size 12px
                            margin-top 10px

                    img
                        border-radius: 5px;
                        width: 91px
                        height: 91px

                .final
                    text-align right
                    color #999
                    font-size 16px
                    margin 12px 0
                    .txt
                        font-size 12px
                        font-weight 500
                        color #333
                        margin-left 16px
                        .price
                            color #333
                            font-weight 500
                            font-size 16px
                .btn
                    display flex
                    justify-content flex-end
                    font-size 15px
                    color #666

                    div
                        padding 6px 13px
                        margin-left 11px
                        display flex
                        justify-content center
                        align-items center

                    .gray
                        border 1px solid #999
                        border-radius 5px
                        color #999

                    .dark
                        color #fff
                        border 1px solid #00D6C0
                        border-radius 5px
                        background-color #00D6C0


</style>
